<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>智能社项目实战-豆瓣电台</title>
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/style.css">
  <link rel="stylesheet" href="./css/header.css">

  <link rel="stylesheet" href="./font/iconfont.css">
</head>

<body>
  <div class="app-header">
    <div class="inner">
      <div class="nav-logo" style="z-index: 1000;">
        <div>
          豆瓣FM
        </div>
      </div>

      <div class="feedback">
        <div style="display: inline-block;"><a href="">下载豆瓣FM APP</a></div><span>
          <svg title="Title" viewBox="0 0 9 9" height="9" width="9" class="icon" style="vertical-align: middle;">
            <desc>Icon</desc>
            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <circle id="Oval-59" fill="#c6c6c6" cx="4.5" cy="4.5" r="1.5"></circle>
            </g>
          </svg>
        </span><a href="#">我要反馈</a>
      </div>

      <div class="fr">
        <div class="user-block">
          <!-- 未登录 -->
          <div style="display: none">
            <a href="#/login" class="login-link">登录</a>&nbsp;
            <span style="color: rgb(216, 216, 216); margin-left: 10px;">|</span>
            <a href="#" class="login-link">注册</a>
          </div>

          <!-- 已登陆 -->
          <div>
            <div class="cover avatar" style="background-image: url(https://img3.doubanio.com/icon/ul188738892-1.jpg);">
            </div>

            <span>
              <span class="info">
                <span class="text">
                  已听1首
                </span>
              </span>
            </span>

            <!-- 三角 -->
            <svg title="Title" viewBox="0 0 16 16" height="16" width="16" class="icon"
              style="vertical-align: middle; transition: all 0.3s ease-out 0s;">
              <desc>Icon</desc>
              <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <polygon id="Triangle-1" fill="#c6c6c6"
                  transform="translate(8.000000, 8.500000) scale(1, -1) translate(-8.000000, -8.500000) "
                  points="8 6 12 11 4 11 "></polygon>
              </g>
            </svg>
          </div>

          <!-- 详情 -->
          <div class="recent-live-list">
            <ul>
              <li class="crust-item">
                <div class="row user-info">
                  <img class="avatar2" src="https://img3.doubanio.com/icon/ul188738892-1.jpg" alt="">
                  <div class="column">
                    <p>用户名</p>
                    <p class="label row aic">
                      升级到
                      <img src="./img/pro.png" height="20" alt="">
                    </p>
                  </div>
                </div>
                <p class="labels">累计收听<span>123</span>首</p>
                <p class="labels">红心<span>123</span>首 不再播放<span>250</span>首</p>
                <ul class="live-list">
                  <li class="row aic">
                    <i class="iconfont icon-play"></i>
                    <div class="column flex-1">
                      <div class="name">音乐名称</div>
                      <div>作者</div>
                    </div>
                    <i class="iconfont icon-heart-fill active-h"></i>

                  </li>
                  <li class="row aic">
                    <div>
                      <i class="iconfont icon-play"></i>
                    </div>

                    <div class="column flex-1">
                      <div class="name">音乐名称</div>
                      <div>作者</div>
                    </div>
                    <i class="iconfont icon-heart-fill active-h"></i>

                  </li>
                </ul>

                <p class="look-history">查看收听记录</p>
              </li>

              <li class="crust-item">账户设置</li>

              <li class="crust-item">退出</li>

            </ul>
          </div>

        </div>
      </div>

    </div>
  </div>

  <div class="player-wrapper">
    <div class="main row jcc">
      <div class="middle">
        <!-- 豆瓣精选标题 -->
        <div style="position: absolute;" class="column">
          <div class="wave">
            <div class="_2MUigC9rTs5TkYEURNVt2q">
            </div>
            <div class="JvceXUqvhLlL6h0qs-nzk">
            </div>
            <div class="_3DmB-mG2d4JJdAo4ugPaTU">
            </div>
            <div class="_3GgHqQVPiHBR5MylzyjNls">
            </div>
          </div>
          <div class="b-tab-title">
            豆瓣精选 MHz
            <svg title="Title" viewBox="134 78 9 16" height="16" width="16" class="icon"
              style="vertical-align: middle; top: -2px; margin-left: 14px;">
              <desc>Icon</desc>
              <path
                d="M140.895865,89.8459828 C140.690998,90.0513391 140.358992,90.0513391 140.15362,89.8459828 C139.948793,89.640129 139.948793,89.3071763 140.15362,89.1013146 L143.246666,86.000004 L140.15362,82.8981639 C139.948793,82.6927996 139.948793,82.3593654 140.15362,82.1539931 C140.358992,81.948669 140.690998,81.948669 140.895865,82.1539931 L144.360483,85.6274131 C144.56535,85.8332669 144.56535,86.1662116 144.360483,86.3720814 L140.895865,89.8459828 Z M136.618268,89.8459828 C136.823135,90.0513391 137.155141,90.0513391 137.360513,89.8459828 C137.56534,89.640129 137.56534,89.3071763 137.360513,89.1013146 L134.267467,86.000004 L137.360513,82.8981639 C137.56534,82.6927996 137.56534,82.3593654 137.360513,82.1539931 C137.155141,81.948669 136.823135,81.948669 136.618268,82.1539931 L133.15365,85.6274131 C132.948783,85.8332669 132.948783,86.1662116 133.15365,86.3720814 L136.618268,89.8459828 Z"
                stroke="none" fill="#6BBD7A" fill-rule="evenodd"
                transform="translate(138.757066, 86.000000) rotate(90.000000) translate(-138.757066, -86.000000) ">
              </path>
            </svg>
          </div>

          <!-- 弹出框 -->
          <!--<div class="live-tab">
            <div>
              <div class="wave s">
                <div class="_2MUigC9rTs5TkYEURNVt2q">
                </div>
                <div class="JvceXUqvhLlL6h0qs-nzk">
                </div>
                <div class="_3DmB-mG2d4JJdAo4ugPaTU">
                </div>
                <div class="_3GgHqQVPiHBR5MylzyjNls">
                </div>
              </div>

              <div class="container">
                <ul class="column">
                  <li class="row aic active">
                    <img class="img"
                      src="https://img3.doubanio.com/f/fm/55cc7ebd1777d5101a82d7d6ce47ffc5e114131d/pics/fm/san_favicon.png"
                      alt="">
                    豆瓣精选 MHz
                  </li>
                  <li class="row aic">
                    <i class="iconfont icon-heart-fill active-h"></i>
                    我的红心歌曲
                  </li>
                  <li class="row aic">
                    <img class="img" src="https://img3.doubanio.com/icon/ul188738892-1.jpg" alt="">
                    我的私人 MHz
                  </li>
                </ul>

                <hr class="_24GcLdJnvrJ23aKnPCasbJ">

                <div class="row aic collect-link">
                  <p class="flex-1">我最近收藏的兆赫和歌单</p>

                  <svg class="icon icon-angle-right" width="18" height="18" viewBox="0 0 18 18" version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    style="transform: rotate(270deg); position: absolute; right: 28px; bottom: 20px;">
                    <defs></defs>
                    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                      <path
                        d="M13.8074785,10.809253 C14.0641738,11.0815536 14.0641738,11.5228421 13.8074785,11.7958146 C13.5501613,12.0680618 13.1339704,12.0680618 12.8766432,11.7958146 L9.00000502,7.68466501 L5.12270484,11.7958146 C4.86599947,12.0680618 4.44920681,12.0680618 4.19249141,11.7958146 C3.9358362,11.5228421 3.9358362,11.0815536 4.19249141,10.809253 L8.53426641,6.20422541 C8.79158361,5.93192486 9.20776444,5.93192486 9.46510169,6.20422541 L13.8074785,10.809253 Z"
                        id="Shape" fill="#C6C6C6"
                        transform="translate(9.000000, 9.000000) scale(1, -1) translate(-9.000000, -9.000000)"></path>
                    </g>
                  </svg>
                </div>
              </div>
            </div>
          </div>
-->
          <!-- 弹出框 -->
        </div>
        <!-- 豆瓣精选标题 -->

        <div class="row">
          <!-- left -->
          <div>
            <div class="inner column">
              <!-- 名字 备注 时间 音量 -->
              <a class="link _3bHLm1OOWrgMRrfiRpBpRz title">
                The
                Gift
              </a>

              <a class="link _3bHLm1OOWrgMRrfiRpBpRz label">
                Pax Japonica Groove
              </a>

              <div class="label-group row aic">
                <div class="volume-and-time">
                  <div class="time">-03:03</div>
                </div>
                <div class="volume-slider flex-1">
                  <i class="iconfont icon-remind"></i>
                  <div class="slider ui-slider hide">
                    <div class="bar-container">
                      <div class="bar" style="background-color: rgb(151, 151, 151); height: 2px; width: 37.5px;">
                      </div>
                    </div>
                  </div>
                </div>

                <ul class="row icon-list">
                  <li>
                    <i class="iconfont icon-geci24"></i>
                  </li>
                  <li>
                    <i class="iconfont icon-xiazai1"></i>
                  </li>
                  <li>
                    <i class="iconfont icon-fenxiang1"></i>
                  </li>
                </ul>
              </div>

            </div>
            <!-- 名字 备注 时间 音量 -->

            <div class="progress-bar">
              <div class="bar-container">
                <div class="bar" style="width: 20%;"></div>
              </div>
            </div>

            <div class="buttons row">
              <ul class="flex-1 buttons-list row aic">
                <li>
                  <i class="iconfont icon-heart-fill"></i>
                </li>
                <li>
                  <i class="iconfont icon-delete-fill"></i>
                </li>
              </ul>
              <ul class="buttons-list row aic">
                <li>
                  <i class="iconfont icon-pausecircle-fill"></i>
                  <!-- <i class="iconfont icon-playcircle-fill"></i> -->
                </li>
                <li>
                  <i class="iconfont icon-xiayishou"></i>
                </li>
              </ul>
            </div>
          </div>
          <!-- right -->
          <div class="playing-cover">
            <img src="https://img1.doubanio.com/view/subject/m/public/s28280029.jpg">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="login" style="display: none">
    <div class="main">
      <div class="close">x</div>
      <iframe src="./login.html" width="480" height="450" scrolling="no" frameborder="0"></iframe>
    </div>
    <div class="background"></div>
  </div>
  <script src="./js/index.js"></script>
  <script>
    // const d = new douban('.b-tab-title')
    const d = new douban('.title')

  </script>
</body>

</html>
